import React, { PureComponent } from "react";
import { Form, Input, Select } from "antd";

const Option = Select.Option;
const Item = Form.Item;
class UserForm extends PureComponent {
  formRef = React.createRef();
  componentDidMount() {
    // this.props.setForm(this.props.form);
  }

  render() {
    const { roles } = this.props;
    const user = this.props.user || {};
    console.log(this.props);
    // console.log(user);
    const layout = {
      labelCol: {
        span: 5,
      },
      wrapperCol: {
        span: 14,
      },
    };
    return (
      <Form ref={this.formRef}>
        <Item
          label="用户名"
          rules={[{ required: true, message: "用户名不能为空" }]}
          {...layout}
          name="username"
          initialValue={user.username}
        >
          <Input placeholder="请输入用户名" />
        </Item>
        {user._id ? null : (
          <Item
            label="密码"
            rules={[{ required: true, message: "密码不能为空" }]}
            {...layout}
            name="password"
            initialValue={user.password}
          >
            <Input type="password" placeholder="请输入密码" />
          </Item>
        )}
        <Item
          label="手机号"
          rules={[{ required: true, message: "手机号不能为空" }]}
          {...layout}
          name="phone"
          initialValue={user.phone}
        >
          <Input placeholder="请输入手机号" />
        </Item>
        <Item
          label="邮箱"
          rules={[{ required: true, message: "邮箱不能为空" }]}
          {...layout}
          name="email"
          initialValue={user.email}
        >
          <Input placeholder="请输入邮箱" />
        </Item>
        <Item
          label="角色"
          name="role_id"
          {...layout}
          initialValue={user.user_id}
        >
          <Select placeholder="请选择分类">
            {roles.map((role) => (
              <Option key={role._id} value={role._id}>
                {role.name}
              </Option>
            ))}
            {/* <Option value='1'>A</Option>
            <Option value='2'>B</Option> */}
          </Select>
        </Item>
      </Form>
    );
  }
}

export default UserForm;
